<template>
	<el-dialog
	  title="作品详情"
	  :visible.sync="dialogVisible"
	  :appendToBody="true"
	  width="70%"
	  top="2vh"
	  @close="handleClose()"
	  @open="handleOpen()"
	>
		<div class="dialog-detail">
			<div class="left">
				<div ref="threeContainer" class="model-content" v-if="isShowModel"></div>
			</div>
			
			<div class="right">
				<div class="creater-wrap">
					<div class="creater">
						<p class="name">{{modelInfo.realname}}</p>
						<span>{{modelInfo.classname}}</span>
					</div>
					<span class="time">{{modelInfo?.create_time?.slice(0,10)}}</span>
				</div>
				
				<div class="guider">
					<div>
						<span class="guider-l">指导老师</span>
						<span class="guider-r">{{modelInfo.teachername}}</span>
					</div>
					
					<div>
						<span class="guider-l">作品评级</span>
						<span class="guider-r">{{modelInfo.level | levelMap}}</span>
					</div>
				</div>
				
				<div class="prompt-wrap mgb-15">
					<h1>提示词</h1>
					<div class="textarea-wrap">
						<el-input type="textarea" placeholder="描述你想要生成的物体，如火星。" readonly v-model="modelInfo.name"></el-input>
					</div>
				</div>	
				
				<div class="prompt-wrap mgb-15">
					<h1>反面提示词</h1>
					<div class="textarea-wrap">
						<el-input type="textarea" placeholder="描述你想要生成的物体，如火星。" readonly v-model="modelInfo.negative_prompt"></el-input>
					</div>
				</div>	
				
				<div class="art-wrap">
					<h1>艺术风格<span></span></h1>
					<div>{{modelInfo.styleName}}</div>
				</div>	
			</div>	
		</div>
	</el-dialog>
</template>

<script>
	import * as THREE from "three";
	import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
	import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
	import Utils from '@/jslibs/utils'
	import {getModelDetail} from '@/api/work.js';
	export default {
		props: {
			model_id:{
				type: [String,Number],
				default: ""
			},
			
			visible: {
			  type: Boolean,
			  default: false
			}
		},

		data() {
			return {
				camera: null,
				scene: null,
				renderer: null,
				loader:null,
				modelUrl:"",
				modelInfo:{},
				isShowModel:false,
				artList:[
					{name:"智能",key:"auto"},
					{name:"写实",key:"realistic"},
					{name:"卡通",key:"cartoon"},
					{name:"雕塑",key:"sculpture",}
				]
			}
		},
		
		computed: {
		  dialogVisible: {
		    set(val) {
				console.log(val,"fff")
		      this.$emit("update:visible", val)
		    },
		    get() {
		      return this.visible
		    }
		  },
		},
		
		created() {
			
		},
		
		methods: {
			initModel(){
				const width = this.$refs.threeContainer.clientWidth;
				const height = this.$refs.threeContainer.clientHeight;
				// 创建场景
				this.scene = new THREE.Scene();
				// 添加相机
				this.camera = new THREE.PerspectiveCamera(75, width / height, 0.01, 3000);
				this.camera.position.z = 1;
				this.camera.lookAt(0, 0, 0)
				// 创建渲染器
				this.renderer = new THREE.WebGLRenderer({ antialias: true,alpha:true });
				this.renderer.setSize(width, height);
				this.renderer.setClearColor(0x000000,0);
				this.$refs.threeContainer.appendChild(this.renderer.domElement);
				this.loader = new GLTFLoader();				// 加载3D模型
				this.loader.load(this.modelUrl, (gltf) => {
					gltf.scene.traverse(function(child) {
						if (child.isMesh) {
							child.material.emissive = child.material.color;
							child.material.emissiveMap = child.material.map;
						}
					});
					this.scene.add(gltf.scene);
				},
				(xhr) =>{
					
				},
				(error) => {
					console.error(error);
				})	
				//添加控制器
				let controls = new OrbitControls(this.camera, this.renderer.domElement);
				controls.addEventListener("change", () => {
					this.renderer.render(this.scene, this.camera);
				});
			},
			
			animate(){
				requestAnimationFrame(this.animate);
				this.renderer.render(this.scene, this.camera);
			},
			
			async getModelDetail(){
				const obj = {model_id: this.model_id};
				const {
					data,
					status
				} = await getModelDetail(obj);
				if (status !== 200) return;
				if(data.code == 200 && data.data){
					this.modelInfo = data.data.info || {};
					this.modelUrl = this.modelInfo.glbUrl;
					this.modelInfo.styleName = this.artList.find(ele => ele.key == this.modelInfo.style)?.name;
					if(this.modelUrl){
						this.initModel();
						this.animate();
					}
				}
				else{
					this.modelInfo = {};
					this.$message.warning(data && data.message || '登录失败');
				}
			},
			handleClose(){
				this.isShowModel = false;
				this.renderer.forceContextLoss();
				this.renderer.dispose();
				this.scene.remove();
				// this.scene = null;
				// this.camera = null;
				// this.controls = null;
				// this.renderer.domElement = null;
				// this.renderer = null;
				this.modelInfo = {};
				this.modelUrl = '';
			},
			handleOpen(){
				if(this.model_id){
					this.isShowModel = true;
					this.getModelDetail()
				}
			}
		}
	};
</script>

<style lang="less" scoped>
		:deep(.el-dialog__body){
			padding-top: 0;
			padding-bottom: 20px;
		}
		.dialog-detail {
			display: flex;
			justify-content: space-between;
			overflow: auto;
			.left{
				width: 65%;
				background: #F0F3F4;
				.model-content{
					width: 100%;
					height: 100%;
					min-height: 500px;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
			.right{
				padding: 0 20px;
				width: 35%;
				overflow: auto;
				.creater-wrap{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.creater{
						display: flex;
						align-items: center;
						span{
							font-size: 16px;
							color: #333333;
						}
						.name{
							margin-right: 20px;
							font-size: 18px;
							color: #333333;
						}
					}
					.time{
						font-size: 14px;
						color: #999999;
					}
				}
				.guider{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 16px 0;
					span{
						font-size: 14px;
					}
					.guider-l{
						margin-right: 10px;
						color: #999999;
					}
					.guider-r{
						color: #333333;
					}
				}
				h1{
					font-size: 16px;
					color: #333333;
					margin-bottom: 15px;
					position: relative;
					span{
						color:#FFC267
					}
				}
				.mgb-15{
					margin-bottom: 20px;
				}
			}
		}
	
</style>
